<template>
  <v-label :config="config" @transformend="handleTransformEnd">
    <v-tag :config="tagConfig" />
    <v-text :config="textConfig" />
  </v-label>
</template>

<script>
export default {
  name: "XLabel",
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
  },
  methods: {
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },
  },
  data () {
    return {
      tagConfig: {
        fill: 'black',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.5
      },
      textConfig: {
        text: 'Tooltip pointing down',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white'
      }
    };
  },
}
</script>
